<template>
  <div id="songs">
    <div class="title">
      <span>搜索"{{ keywords }}",</span>
      <span
        >共<span :style="{ color: 'rgb(255, 165, 0)' }">{{ count }}</span
        >首单曲</span
      >
    </div>
    <div class="result">
      <ul>
        <li>
          <div style="background-color: rgb(247, 247, 247)"></div>
          <div style="background-color: rgb(247, 247, 247)">
            <span>歌曲</span>
          </div>
          <div style="background-color: rgb(247, 247, 247)">
            <span>歌手</span>
          </div>
          <div style="background-color: rgb(247, 247, 247)">
            <span>专辑</span>
          </div>
        </li>
        <li
          v-for="(item, index) in songsList"
          :key="index"
          @click="gotoSong(item)"
        >
          <div class="no">
            <span>{{ index + 1 }}</span>
          </div>
          <div class="name">
            <span>{{ item.name }}</span>
            <span v-show="item.alia.length > 0" style="color: #999"
              >({{ item.alia[0] }})</span
            >
          </div>
          <div class="artName">
            <span v-for="(artItem, artIndex) in item.ar" :key="artIndex">
              <span>{{ artItem.name }}</span>
              <span v-show="artIndex >= item.ar.length"></span>
            </span>
          </div>
          <div class="album">
            <span>{{ item.al.name }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 关键词
      keywords: null,
      //   结果总数
      count: 0,
      // 歌曲列表
      songsList: [],
    };
  },
  methods: {
    // 播放音乐
    gotoSong(item) {
      this.$axios({
        url: "/song/url",
        params: {
          id: item.id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        let data = {
          url,
          name: item.name,
          picUrl: item.al.picUrl,
          alias: item.alia[0],
          arts: item.ar,
        };
        this.$bus.$emit("get-src", data);
      });
    },
  },
  created() {
    this.keywords = this.$route.query.keywords;

    // 获取单曲
    this.$axios({
      url: "/cloudsearch",
      params: {
        keywords: this.keywords,
        type: 1,
      },
    }).then((res) => {
      this.count = res.data.result.songCount;
      this.songsList = res.data.result.songs;
    });
  },
  watch: {
    "$route.query.keywords"() {
      this.keywords = this.$route.query.keywords;
      this.$axios({
        url: "/cloudsearch",
        params: {
          keywords: this.keywords,
          type: 1,
        },
      }).then((res) => {
        this.count = res.data.result.songCount;
        this.songsList = res.data.result.songs;
      });
    },
  },
};
</script>

<style scoped>
@import url("../../css/result/songs");
</style>